<template>
  <div class="login-panel">
    <div class="login-box">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
        <div class="title-container">
          <h3 class="title">登 录</h3>
        </div>
    
        <el-form-item prop="username">
          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="请输入手机号"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
            prefix-icon="el-icon-mobile-phone"
          />
        </el-form-item>
    
        <el-form-item prop="password">
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            
            show-password
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            auto-complete="on"
            @keyup.enter.native="handleLogin"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" plain style="width:100%;margin-bottom:0px;" @click.native.prevent="handleLogin('loginRules')">点击验证登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <a style="margin-left: 40px;" href="javascript: void(0)" @click="supplier_login">商户登录</a>

    <el-dialog :visible.sync="dialogVerify" width="360px"></el-dialog>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { getName, getPassWord } from '@/utils/auth'

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入手机号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('请输入不少于6个字符的密码'))
      } else {
        callback()
      }
    }
    return {
      dialogVerify: false,
      isAgrre: true,
      loginForm: {
        username: getName(),
        password: getPassWord()
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    handleLogin() {
      

      this.$refs.loginForm.validate(valid => {
        if (valid) {
          if(!this.isAgrre){
            this.$message.error('请阅读并勾选同意《用户使用协议》后，方可登录')
            return
          }

          this.$emit('Verify',this.loginForm);
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    register() {
      console.log('111')
      this.$emit('register')
    },
    supplier_login() {
      location.href = window.location.href.split('#')[0] + 'ie1_adminSupplier/';
    }
  }
}
</script>

<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    // padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    // color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      // color: $light_gray;
      margin: 0px auto 25px auto;
      text-align: center;
      font-weight: 600;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>

<style lang="css" scoped>
.login-panel{
  width: 376px;
  height: 316px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 auto;
  box-shadow: 1px 2px 5px 1px #292929;
  padding: 30px 10px;
}
.login-box{
  padding: 0 40px;
}
.login-title{
  text-align: center;
  font-size: 24px;
}
.other-user{
  font-size: 10px;
}
.other-user-text{
  font-size: 10px;
  color: #545454
}
.register-link{
  position: relative;
  top: -260px;
  left: 310px;
}
</style>